<template>
    <div class="person">
        <img :src="avatar" alt="">
        <span>{{ name }}</span>
        <i class="el-icon-delete-solid del" @click="doClick"></i>
    </div>
</template>

<script>
export default {
    props: {
        avatar: {//声明属性，指定头像
            type: String,
            default: ''
        },
        name: {//指定昵称
            type: String,
            default: '默认昵称',
        }
    },
    methods: {
        doClick() {
            this.$emit('delete', { a: 1 });
        }
    },
}
</script>

<style lang="scss" scoped>
.person {
    margin: 5px;
    display: inline-block;
    width: 110px;
    padding: 5px;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 10px;
    position: relative;
    overflow: hidden;

    &:hover {
        .del {
            transform: translate(-50%, -50%);
        }
    }

    >.del {
        position: absolute;
        background: rgba(0, 0, 0, 0.4);
        font-size: 40px;
        width: 120px;
        height: 165px;
        color: rgba(255, 255, 255, 0.8);
        top: 50%;
        left: 50%;
        transform: translate(-150%, -50%);
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    >img {
        width: 110px;
        height: 130px;
        border-radius: 10px;

    }

    >span {
        display: block;
        width: 110px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
</style>